<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>响应式页面示例</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<header>
		<h1>响应式页面示例</h1>
		<nav>
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">产品</a></li>
				<li><a href="#">关于我们</a></li>
				<li><a href="#">联系我们</a></li>
			</ul>
		</nav>
	</header>

	<main>
		<section class="banner">
			<h2>这是一个响应式页面示例</h2>
			<p>在不同设备上都能提供最佳用户体验</p>
			<a href="#" class="btn">查看详情</a>
		</section>

		<section class="features">
			<h2>我们的特点</h2>
			<ul>
				<li>
					<i class="fa fa-code"></i>
					<h3>专业技术</h3>
					<p>我们有一支专业的技术团队，可以提供最好的服务。</p>
				</li>
				<li>
					<i class="fa fa-pencil"></i>
					<h3>创意设计</h3>
					<p>我们的设计师精通各种设计软件，可以为您提供最好的设计方案。</p>
				</li>
				<li>
					<i class="fa fa-check"></i>
					<h3>高质量保证</h3>
					<p>我们承诺提供高质量的服务，以满足客户的需求。</p>
				</li>
			</ul>
		</section>

		<section class="about">
			<h2>关于我们</h2>
			<img src="img/about.jpg" alt="公司简介">
			<p>我们是一家专业的网络开发和设计公司，致力于为客户提供最好的解决方案。</p>
		</section>

		<section class="contact">
			<h2>联系我们</h2>
			<form>
				<label for="name">姓名：</label>
				<input type="text" id="name" name="name">
				<label for="email">邮箱：</label>
				<input type="email" id="email" name="email">
				<label for="message">留言：</label>
				<textarea id="message" name="message"></textarea>
				<button type="submit" class="btn">提交</button>
			</form>
		</section>
	</main>

	<footer>
		<p>版权所有 © 2023 响应式页面示例</p>
	</footer>
</body>
</html>
